<template>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="Id" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column  label="配置工作流" width="500" >
        <template #default="scope">
            <el-button  type="primary" @click="handleEdit(scope.row.id)">配置使用角色</el-button>
            <el-button  type="primary" @click="handleExam(scope.row.id)">配置工作流权限</el-button>
        </template>
    </el-table-column>
</el-table>
    


<el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
  >



    <el-transfer v-model="checkedlist" :data="reslist" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="submit">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>


  <el-dialog v-model="dialogFormVisible2" title="Shipping address" width="500">
    <div>   
        <ul>
            <li v-for="item in EAdata">
                <select v-model="item.position" :style="{ width: '200px', height: '30px' }">
                    <option v-for="item in posdata" :value="item.id" >{{ item.name }}</option>
                </select>
                <input v-model="item.level" :style="{ width: '200px', height: '30px' }" placeholder="请输入level">


            </li>

        </ul>

    </div>
    <template #footer>



        <el-button @click="addEA">add</el-button>
        <el-button @click="dialogFormVisible2 = false">Cancel</el-button>
        <el-button type="primary" @click="pwfsubmit">
          Confirm
        </el-button>
    </template>
  </el-dialog>




</template>



<script setup>
import { ref,onMounted } from 'vue'
import axios from 'axios'

const tableData = ref([])
const dialogVisible = ref(false)

const dialogFormVisible2 = ref(false)


const reslist = ref([])
const checkedlist = ref([])

const role_id = ref(null)
const EAdata = ref([
    {
        position:"",
        level:"",
    }
])

const posdata = ref([])




const handleEdit=(id) =>{
    dialogVisible.value = true
    role_id.value = id
    axios.get('http://127.0.0.1:8000/wf/pwf/?id=' + id)
    .then(res=>{
        console.log(res);
        reslist.value = res.data.all;
        checkedlist.value = res.data.has;
    })


    console.log(id)
}


const getdata =()=>{
    axios.get('http://127.0.0.1:8000/wf/add/')
    .then(res=>{
        tableData.value = res.data
    })



}

onMounted(()=>{
    getdata()
})


const submit =()=>{
    console.log(checkedlist.value)

    const data = {
        "id":role_id.value,
        "roles":checkedlist.value
    }
    axios.post('http://127.0.0.1:8000/wf/pwf/',data)
    .then(res=>{
        console.log(res)
    })
    dialogVisible.value = false
}
    



const handleExam =(id)=>{
    role_id.value = id
    console.log(id)
    dialogFormVisible2.value = true
    getposition()
    axios.get('http://127.0.0.1:8000/wf/ea/?id=' + id)
    .then(res=>{
        console.log(res)
        if (res.data != "400" ){
            EAdata.value = res.data
            
        }
    })

}


const addEA =()=>{
    EAdata.value.push({
        position:"",
        level:"",
    })
}



const getposition =()=>{
    axios.get('http://127.0.0.1:8000/wf/pos/')
    .then(res=>{
        console.log(res)
        posdata.value = res.data
    })
}


const pwfsubmit =()=>{
    
    const data={
        id:role_id.value,
        data:EAdata.value
    }
    console.log(data)
    axios.post('http://127.0.0.1:8000/wf/pos/',data)
    .then(res=>{
        console.log(res)
        dialogFormVisible2.value = false
    })
    
    
}


</script>




<style scoped>

</style>